<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>教务管理系统</title>
    <!-- 导入jquery核心类库 -->
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"
            th:src="@{//localhost:8082/assert/js/jquery-1.8.3.js}"></script>
    <!-- 导入easyui类库 -->
    <link id="easyuiTheme" rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"
          th:href="@{//localhost:8082/assert/js/easyui/themes/default/easyui.css}">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"
          th:href="@{//localhost:8082/assert/js/easyui/themes/icon.css}">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath }/css/default.css"
          th:href="@{//localhost:8082/assert/css/default.css}">
    <script type="text/javascript"
            src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"
            th:src="@{//localhost:8082/assert/js/easyui/jquery.easyui.min.js}"></script>
    <!-- 导入ztree类库 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"
          type="text/css" th:href="@{//localhost:8082/assert/js/ztree/zTreeStyle.css}"/>
    <script
            src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"
            type="text/javascript" th:src="@{//localhost:8082/assert/js/ztree/jquery.ztree.all-3.5.js}"></script>
    <script
            src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
            type="text/javascript" th:src="@{//localhost:8082/assert/js/easyui/locale/easyui-lang-zh_CN.js}"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script type="text/javascript">
        // 初始化ztree菜单
        $(function () {
            // 系统管理菜单加载
            // $.ajax({
            //     url: 'http://localhost:8082/assert/json/admin.json',
            //     xhrFields: {
            //         withCredentials: true
            //     },
            //     crossDomain: true,
            //     success: function (data) {
            //         var zNodes = eval("(" + data + ")");
            //         $.fn.zTree.init($("#adminMenu"), setting, zNodes);
            //     },
            //     error: function (msg) {
            //         alert('管理员菜单加载异常!');
            //     }
            // });

        });

        function onClick(event, treeId, treeNode, clickFlag) {
            // 判断树菜单节点是否含有 page属性
            if (treeNode.page != undefined && treeNode.page != "") {
                if ($("#tabs").tabs('exists', treeNode.name)) {// 判断tab是否存在
                    $('#tabs').tabs('select', treeNode.name); // 切换tab
                } else {
                    // 开启一个新的tab页面
                    var content = '<div style="width:100%;height:100%;overflow:hidden;">'
                        + '<iframe src="'
                        + treeNode.page
                        + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';

                    $('#tabs').tabs('add', {
                        title: treeNode.name,
                        content: content,
                        closable: true
                    });
                }
            }
        }

        /*******顶部特效 *******/
        /**
         * 更换EasyUI主题的方法
         * @param themeName
         * 主题名称
         */
        changeTheme = function (themeName) {
            var $easyuiTheme = $('#easyuiTheme');
            var url = $easyuiTheme.attr('href');
            var href = url.substring(0, url.indexOf('themes')) + 'themes/'
                + themeName + '/easyui.css';
            $easyuiTheme.attr('href', href);
            var $iframe = $('iframe');
            if ($iframe.length > 0) {
                for (var i = 0; i < $iframe.length; i++) {
                    var ifr = $iframe[i];
                    $(ifr).contents().find('#easyuiTheme').attr('href', href);
                }
            }
        };

        // 退出登录
        function logoutFun() {
            $.messager
                .confirm(
                    '系统提示',
                    '您确定要退出本次登录吗?',
                    function (isConfirm) {
                        if (isConfirm) {
                            location.href = '${pageContext.request.contextPath }/logout.action';
                        }
                    });
        }

        // 修改密码
        function editPassword() {
            $('#editPwdWindow').window('open');
        }

        // 版权信息
        function showAbout() {
            $.messager.alert("教务管理系统 v1.0", "管理员邮箱: 502513206@qq.com");
        }
    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false"
     style="height: 80px; padding: 10px; background: url('//localhost:8082/assert/images/header_bg.png') no-repeat right;">
    <div>
        <img src="${pageContext.request.contextPath }/images/logo_jw.png"
             th:src="@{//localhost:8082/assert/images/logo_jw.png}"
             border="0">
    </div>
    <div style="position: absolute; right: 15px; top: 15px;font-size: 20px">欢迎你:<span id="username"></span></div>
    <div id="sessionInfoDiv"
         style="position: absolute; right: 5px; top: 10px;"></div>
    <div style="position: absolute; right: 5px; bottom: 10px;">
        <a href="javascript:void(0);" class="easyui-menubutton"
           data-options="menu:'#layout_north_pfMenu',iconCls:'icon-ok'">更换皮肤</a>
        <a href="javascript:void(0);" class="easyui-menubutton"
           data-options="menu:'#layout_north_kzmbMenu',iconCls:'icon-help'">控制面板</a>
    </div>
    <div id="layout_north_pfMenu" style="width: 120px; display: none;">
        <div onclick="changeTheme('default');">default</div>
        <div onclick="changeTheme('gray');">gray</div>
        <div onclick="changeTheme('black');">black</div>
        <div onclick="changeTheme('bootstrap');">bootstrap</div>
        <div onclick="changeTheme('metro');">metro</div>
    </div>
    <div id="layout_north_kzmbMenu" style="width: 100px; display: none;">
        <div onclick="editPassword();">修改密码</div>
        <div onclick="showAbout();">联系管理员</div>
        <div class="menu-sep"></div>
        <div onclick="logoutFun();">退出系统</div>
    </div>
</div>
<div data-options="region:'west',split:true,title:'菜单导航'"
     style="width: 200px">
    <div class="easyui-accordion" fit="true" border="false">
        <div title="基本功能" data-options="iconCls:'icon-mini-add'"
             style="overflow: auto">
            <ul id="treeMenu" class="ztree"></ul>
        </div>
        <div title="系统管理" data-options="iconCls:'icon-mini-add'"
             style="overflow: auto">
            <ul id="adminMenu" class="ztree"></ul>
        </div>
    </div>
</div>
<div data-options="region:'center'">
    <div id="tabs" fit="true" class="easyui-tabs" border="false">
        <div title="消息中心" id="subWarp"
             style="width: 100%; height: 100%; overflow: hidden">
            <iframe src="http://localhost:10010/manager/page/common/home"
                    style="width: 100%; height: 100%; border: 0;"></iframe>
            <%-- 这里显示公告栏、预警信息和代办事宜--%>
        </div>
    </div>
</div>
<div data-options="region:'south',border:false"
     style="height: 50px; padding: 10px; background: url('//localhost:8082/assert/images/header_bg.png') no-repeat right;">
    <table style="width: 100%;">
        <tbody>
        <tr>
            <td style="width: 300px;">
                <div style="color: #999; font-size: 8pt;">
                    Author: 朱小威 | Powered by <a href="#g">zxw</a>
                </div>
            </td>
            <td style="" class="co1"><span id="online"
                                           style="background: url('//localhost:8082/assert/images/online.png') no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;"></span>
            </td>
        </tr>
        <tr></tr>
        <tr>
            <td style="width: 300px;">
                <div style="color: #999; font-size: 8pt;"></div>
            </td>
            <td style="" class="co1"><span id="onlineIp"
                                           style="background: url('//localhost:8082/assert/images/online.png') no-repeat left;padding-left:18px;margin-left:3px;font-size:8pt;color:#005590;">你本次登录IP地址为:</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--修改密码窗口-->
<div id="editPwdWindow" class="easyui-window" title="修改密码"
     collapsible="false" minimizable="false" modal="true" closed="true"
     resizable="false" maximizable="false" icon="icon-save"
     style="width: 300px; height: 160px; padding: 5px; background: #fafafa">
    <div class="easyui-layout" fit="true">
        <div region="center" border="false"
             style="padding: 10px; background: #fff; border: 1px solid #ccc;">
            <form id="editPasswordForm">
                <table cellpadding=3>
                    <tr>
                        <td>新密码：</td>
                        <td><input id="txtNewPass" type="Password"
                                   class="txt01 easyui-validatebox" required="true"
                                   data-options="validType:'length[4,8]'"/></td>
                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td><input id="txtRePass" type="Password"
                                   class="txt01 easyui-validatebox" required="true"
                                   data-options="validType:'length[4,8]'"/></td>
                    </tr>
                </table>
            </form>
        </div>
        <div region="south" border="false"
             style="text-align: right; height: 30px; line-height: 30px;">
            <a id="btnEp" class="easyui-linkbutton" icon="icon-ok"
               href="javascript:void(0)">确定</a> <a id="btnCancel"
                                                   class="easyui-linkbutton" icon="icon-cancel"
                                                   href="javascript:void(0)">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#btnEp")
        .click(
            function () {
                var v = $("#editPasswordForm").form("validate");
                if (v) {
                    var v1 = $("#txtNewPass").val();
                    var v2 = $("#txtRePass").val();
                    if (v1 == v2) {
                        var url = '${pageContext.request.contextPath}/userAction_editPassword.action';
                        $.post(url, {
                            "password": v1
                        }, function (data) {
                            if (data == "1") {
                                $.messager.alert("提示信息", "密码修改成功",
                                    "info");
                            } else {
                                $.messager.alert("提示信息", "密码修改错误",
                                    "error");
                            }
                            $("#editPwdWindow").window("close");
                        });
                    } else {
                        $.messager.alert("提示信息", "两次输入的密码长度不一样！",
                            "warning");
                    }
                }
            });
</script>
<script type="text/javascript">
    var a = returnCitySN["cip"] + ',' + returnCitySN["cname"];
    $("#onlineIp").append(a);
</script>
<script type="text/javascript">
    $(function() {
        let setting = {
            data: {
                simpleData: { // 简单数据
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };

        let user = {
            id: '',
            name: '',
            qx: '',
        };

        let promise = new Promise((resolve, reject) => {
            $.ajax({
                url: 'http://localhost:10010/auth/verify',
                success: function (data) {
                    $("#username").text(data.username);
                    user.id = data.id;
                    user.name = data.username;
                    user.qx = data.qx;
                    resolve("success")
                }
            })
        });
        promise.then(data => {
            //基本功能菜单加载
            $.ajax({
                url: 'http://localhost:10010/manager/function/findMenu',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(user),
                success: function (data) {
                    let zNodes = data;
                    $.fn.zTree.init($("#treeMenu"), setting, zNodes);
                },
                error: function (msg) {
                    alert('菜单加载异常!');
                }
            });
            console.log("接收到参数，开始执行第二个回调函数");
            console.log(user)
            let socket;
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else {
                console.log("您的浏览器支持WebSocket");
                //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
                //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
                socket = new WebSocket("ws://localhost:10010/manager/websocket");
                //打开事件
                socket.onopen = function (event) {
                    console.log("Socket 已打开");
                    console.log(event)
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                socket.onmessage = function (msg) {
                    console.log(msg.data);
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                socket.onclose = function () {
                    console.log("Socket已关闭");
                };
                //发生了错误事件
                socket.onerror = function () {
                    alert("Socket发生了错误");
                    //此时可以尝试刷新页面
                }
                //离开页面时，关闭socket
                //jquery1.8中已经被废弃，3.0中已经移除
                // $(window).unload(function(){
                //     socket.close();
                //});
            }
        }, error => {
            console.log("回调函数执行失败！");
        }).then(data=>{

        });

        $("#btnCancel").click(function () {
            $('#editPwdWindow').window('close');
        });
    });
</script>
<script>

</script>
</body>
</html>